<template>
<div>
  <p>click {{$store.state.count}} time, count is {{theEvenOrOdd}}</p>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
  <button @click="incrementIfOdd">increment if odd</button>
  <button @click="incrementAsync">increment async</button>
</div>
</template>

<script>
import {mapGetters,mapState,mapActions} from 'vuex'

export default {
  name: 'App',
  data(){
    return{
      // evenOrOdd:1
    }
  },
  computed:{
    ...mapState(['count']),
    ...mapGetters(['theEvenOrOdd']),
    /*上面是对下面的简写*/
    /*evenOrOdd(){
      return this.$store.getters.theEvenOrOdd
    }*/
  },
  methods:{
    ...mapActions(['increment','decrement','incrementIfOdd','incrementAsync'])
  }
  /*methods:{
    /!*增加*!/
    increment(){
      this.$store.dispatch('increment')
    },
    /!*减少*!/
    decrement(){
      // const count = this.count;
      /!*通知vuex去增加*!/
      // this.count = count-1
      this.$store.dispatch('decrement') /!*出发store中对应的action启动*!/
    },
    /!*如果是奇数才增加*!/
    incrementIfOdd(){
      this.$store.dispatch('incrementIfOdd')
    },
    /!*过1s才增加*!/
    incrementAsync(){
      this.$store.dispatch('incrementAsync')
    }
  }*/
}
</script>

<style>

</style>
